<template>
	<view v-if="showSelectApproval">
		<uni-popup
			ref="selectApprovalRef"
			@maskClick="closePopup()"
			catchtouchmove="true"
		>
			<view class="popup-bd">
				<view class="popup-title">
					选择关联审批单
					<uni-icons
						type="closeempty"
						size="50rpx"
						color="#666666"
						class="popup-close"
						@click="closePopup()"
					></uni-icons>
				</view>
				<!-- <view class="serach-all">
          <view class="serach-box">
            <uni-icons type="search" size="48rpx" color="#9A9A9A"></uni-icons>
            <input
              type="text"
              v-model="serachVal"
              placeholder="搜索标题"
              class="input-box"
            />
          </view>
        </view> -->
				<scroll-view
					scroll-y="true"
					class="popup-contents"
					lower-threshold="30"
					@scrolltolower="loadMore()"
				>
					<template v-for="(dataItem, index) in copyList">
						<view
							v-if="copyList && copyList.length > 0"
							:key="index"
							class="item-container aa"
						>
							<approve-list
								:selectItem="selectList"
								:data="dataItem"
								:active="active"
								:list="list"
								@handlerSelect="handlerSelect"
							></approve-list>
						</view>
					</template>
					<uni-load-more
						:contentText="contentText"
						:status="status"
					></uni-load-more>
					<view class="duo"></view>
				</scroll-view>
			</view>
			<view class="bottom-button-bd"
				><button class="primary-button w80" @tap.stop="handlerSure">
					确定
				</button></view
			>
		</uni-popup>
	</view>
</template>
<script>
import { getMySubmitted } from '@/subPackagesIndex/pages/index/approval/launch/apis/reimbursement.js'
import approveList from '@/subPackagesIndex/components/approve-list/approve-list.vue'
export default {
	props: {
		showSelectApproval: {
			type: Boolean,
			default: false,
		},
		infoValue: {
			type: Object,
			default: () => {},
		},
		selectItem: {
			type: Array,
			default: () => [],
		},
	},
	components: {
		approveList,
	},
	computed: {
		contentText() {
			return {
				contentdown: '上拉显示更多',
				contentrefresh: '正在加载...',
				contentnomore: this.copyList.length > 0 ? ' ' : '暂无数据',
			}
		},
	},
	data() {
		return {
			pageInfo: {
				pageNo: 1,
				pageSize: 20,
				total: 0,
			},
			active: 3,
			status: 'more',
			list: [],
			copyList: [],
			selectList: this.selectItem,
			serachVal: '',
		}
	},
	onReady() {},
	methods: {
		openPopup() {
			this.$refs.selectApprovalRef.open('bottom')
		},
		closePopup() {
			this.$refs.selectApprovalRef.close()
			this.$emit('close')
		},
		handlerSure() {
			this.$emit('handlerData', this.selectList)
			this.closePopup()
		},
		loadMore() {
			if (this.list.length < this.pageInfo.total) {
				this.pageInfo.pageNo = this.pageInfo.pageNo + 1
				this.getList()
			}
		},
		getList() {
			const formId = this.$store.state.formId
			let params = {
				pageSize: this.pageInfo.pageSize,
				pageNo: this.pageInfo.pageNo,
				formId,
				isApproved: true,
			}
			this.status = 'loading'
			getMySubmitted(params).then((res) => {
				const data = res
				this.pageInfo.total = data.total || 0
				if (this.pageInfo.pageNo == 1 && data.total == 0) {
					this.list = []
					this.status = 'noMore'
					return
				}
				if (data.records && data.records.length > 0) {
					if (this.pageInfo.pageNo == 1) {
						let changeList = this.changeList(data.records)
						this.list = changeList
					} else {
						let changeList = this.changeList(data.records)
						this.list = this.list.concat(changeList)
					}
					if (this.list.length >= this.pageInfo.total) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
				} else {
					this.status = 'noMore'
				}
				if (this.serachVal) {
					let list = JSON.parse(JSON.stringify(this.list))
					this.copyList = this.searchList(list, this.serachVal)
				} else {
					this.copyList = this.list
				}
			})
		},
		changeList(list) {
			let newList = list.map((item) => {
				item.processDefNameCopy = `${
					item.owner.name || item.staterUser.name
				}提交的${item.processDefName}`
				return item
			})
			return newList
		},
		handlerSelect(list) {
			this.selectList = list
		},
		searchList(list, serachVal) {
			let newArr = []
			if (serachVal) {
				list.forEach((item) => {
					if (item.processDefNameCopy.indexOf(serachVal) > -1) {
						newArr.push(item)
					}
				})
			} else {
				newArr = list
			}
			return newArr
		},
		debounce(fn, time = 100) {
			let timer = null
			return function (...args) {
				if (timer) clearTimeout(timer)
				timer = setTimeout(() => {
					fn.apply(this, args)
				}, time)
			}
		},
	},
	watch: {
		showSelectApproval(val) {
			if (val) {
				this.openPopup()
				this.getList()
			} else {
				this.closePopup()
				this.copyList = []
				this.list = []
				this.serachVal = ''
			}
		},
		/* serachVal(val) {
      let that = this;
      this.debounce(() => {
        that.copyList = that.searchList(that.list, val);
      }, 200)();
    }, */
		selectItem(val) {
			this.selectList = val
		},
	},
}
</script>
<style scoped lang="scss">
.popup-bd {
	height: calc(100vh - 500rpx);
	display: flex;
	flex-direction: column;
}
.popup-contents {
	width: 100%;
	padding: 32rpx 32rpx 0 32rpx;
	flex: 1;
	height: 0;
	box-sizing: border-box;
}
.bankContet {
	position: relative;
	.emtpy {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: transparent;
	}
}
.title {
	font-size: 26rpx;
	margin-bottom: 20rpx;
}
.duo {
	width: 100%;
	height: 120rpx;
}
.disable {
	opacity: 0.3;
}
.emptyAll {
	width: 100%;
	height: 24rpx;
}
.serach-all {
	padding: 32rpx 32rpx 0 32rpx;
}
.serach-box {
	border: 2rpx solid #dfdfdf;
	border-radius: 50rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8rpx 8rpx 8rpx 20rpx;
	margin-bottom: 32rpx;
}
.input-box {
	flex: 1;
	padding-left: 10rpx;
	font-size: 30rpx;
}
.button-radius {
	border-radius: 50rpx;
	width: 130rpx;
	background: #3a74fc;
}
.item-container {
	border-top: 1px solid rgb(219, 219, 219);
	padding-top: 20rpx;
}
</style>
